<template>
	<view class="offerDetailContainer">
		<view class="notice">
			<text>根据您填写的情况，我们为了您匹配了几套方案如需咨询其他配置请拨打咨询热线或联系在线客服</text>
		</view>
		<view class="content">
			<view class="project1">
				<u-section title="方案一" sub-title="查看预算详情" :show-line="false" @click="toProject"></u-section>
				<view class="" style="margin-top: 40rpx;">
					<uni-table style="margin: 40rpx 0;" border stripe emptyText="暂无更多数据">
						<!-- 表格区域开始 -->
						<!-- 表头行 -->
						<uni-tr>
							<uni-th width="100rpx" align="center">制冷设备</uni-th>
							<uni-th align="center">制冷风机</uni-th>
							<uni-th align="center">冷库门</uni-th>
							<uni-th align="center">保温板材</uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr>
							<uni-td align="center">谷轮</uni-td>
							<uni-td align="center">蒂亚</uni-td>
							<uni-td align="center">标准门</uni-td>
							<uni-td align="center">聚氨酯100mm</uni-td>
						</uni-tr>
					</uni-table>
					<!-- 表格区域结束 -->
				</view>
				<!-- 推荐工程区域开始 -->
				<view class="recommendProject">
					<u-section title="相关工程案例推荐" sub-title="查看更多" :show-line="false" @click="toProject"></u-section>
					<!-- 引入工程组件 -->
					<ItemBox :key="index" :name="item.projectDesc" v-for="(item,index) in projectData"
						:imgUrl="item.projectImg" :address="item.projectType" :time="item.projectTime"></ItemBox>
				</view>
				<!-- 推荐工程区域结束 -->
			</view>
		</view>
		<view class="project1">
				<u-section title="方案二" sub-title="查看预算详情" :show-line="false" @click="toProject"></u-section>
				<view class="" style="margin: 40rpx 0;">
					<uni-table border stripe emptyText="暂无更多数据">
						<!-- 表格区域开始 -->
						<!-- 表头行 -->
						<uni-tr>
							<uni-th width="100rpx" align="center">制冷设备</uni-th>
							<uni-th align="center">制冷风机</uni-th>
							<uni-th align="center">冷库门</uni-th>
							<uni-th align="center">保温板材</uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr>
							<uni-td align="center">谷轮</uni-td>
							<uni-td align="center">蒂亚</uni-td>
							<uni-td align="center">标准门</uni-td>
							<uni-td align="center">聚氨酯100mm</uni-td>
						</uni-tr>
					</uni-table>
					<!-- 表格区域结束 -->
				</view>
				<!-- 推荐工程区域开始 -->
				<view class="recommendProject">
					<u-section title="相关工程案例推荐" sub-title="查看更多" :show-line="false" @click="toProject"></u-section>
					<!-- 引入工程组件 -->
					<ItemBox :key="index" :name="item.projectDesc" v-for="(item,index) in projectData"
						:imgUrl="item.projectImg" :address="item.projectType" :time="item.projectTime"></ItemBox>
				</view>
				<!-- 推荐工程区域结束 -->
			</view>
			<view class="btn" @click="toDetail">
				<text>获取您的冷库详细预算</text>
			</view>
		</view>
		
	</view>
</template>

<script>
	import ItemBox from '../../../compontents/projectItem/projectItem'
	export default {
		components: {
			ItemBox
		},
		data() {
			return {
				// 推荐工程案例数据
				projectData: [{
						projectImg: "../../static/homeImg/1.jpg",
						projectDesc: "南川小型保鲜库施工中",
						projectType: "保鲜库",
						projectTime: "2021-09-21",
						readNum: 20,
						like: 100

					},
					{
						projectImg: "../../static/homeImg/2.jpg",
						projectDesc: "江津小型冷冻库施工中",
						projectType: "冷冻库",
						projectTime: "2021-08-21",
						readNum: 60,
						like: 50

					}
				],
			};
		},
		methods: {
			// 跳转到工程页面
			toProject() {
				uni.switchTab({
					url: "../../project/project"
				})
			},
			// 跳转到冷库报价详情页
			toDetail(){
				uni.navigateTo({
					url:"../budgetDetail/budgetDetail"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.offerDetailContainer {
		padding: 10rpx 20rpx;

		.notice {
			font-size: 26rpx;
			color: red;
			line-height: 40rpx;
			text-indent: 1rem;
			font-weight: bold;
		}

		.content {
			margin: 20rpx 0;

			.recommendProject {
				margin: 40rpx 0;
			}
		}
		.btn{
			margin: 30rpx 0;
			border: 1rpx solid #C0C0C0;
			padding: 15rpx 0;
			font-size: 26rpx;
			background-color: #1AA8CE;
			text-align: center;
			color: #FFFFFF;
			border-radius: 15rpx;
		}
	}
</style>
